<template>
  <div class="rank-container">
    <h1>打字排行榜</h1>
    <table class="rank-table">
      <thead>
        <tr>
          <th>排名</th>
          <th>用户名</th>
          <th>速度 (WPM)</th>
          <th>准确率 (%)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, idx) in ranks" :key="item.username">
          <td>{{ idx + 1 }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.wpm }}</td>
          <td>{{ item.accuracy }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'Rank',
  data() {
    return {
      ranks: [
        { username: '张三', wpm: 120, accuracy: 99 },
        { username: '李四', wpm: 110, accuracy: 98 },
        { username: '王五', wpm: 105, accuracy: 97 },
        { username: '赵六', wpm: 100, accuracy: 96 },
        { username: '孙七', wpm: 95, accuracy: 95 }
      ]
    }
  }
}
</script>
<style scoped>
.rank-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 2rem;
  background: var(--hover-color);
  border-radius: 10px;
  color: var(--text-color);
}
h1 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}
.rank-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
.rank-table th, .rank-table td {
  border: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  text-align: center;
}
.rank-table th {
  background: var(--primary-color);
  color: white;
}
</style> 